<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号登录</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/regist.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/cookie.js"></script>

</head>

<body>

    <div class="left">
        <img src="../images/banner.4994397e.jpg" alt="">
    </div>
    <div class="right">
        <div class="top">
            <div class="top_left"><img src="../images/logo.png" alt=""> 小米账号</div>
            <div class="top_right"><a href="">用户协议</a><a href="">隐私政策</a><a href="">帮助中心</a> <span class="language">中文(简体) ▼</span> </div>
        </div>
        <div class="main">
            <div class="sanjiao">

            </div>
            <div class="middle">
                <div>
                    <span class="login">登录</span>
                    <span class="regist">注册</span>
                </div>

                <div class="box">
                    <div class="one">
                        <div class="one1">
                            <input type="text" name="" id="user">
                            <div class="mark">邮箱/手机号码/小米ID</div>
                            <div class="tishi">请输入账号</div>
                        </div>

                        <div class="one2">
                            <input type="password" name="" id="pwd">
                            <div class="mark">密码</div>
                            <div class="tishi">请输入登录密码</div>
                        </div>
                        <input type="submit" value="登录" class="submit submit_login">
                        <div class="wangji"><a href="">忘记密码？</a> <a href="">手机号登录</a> </div>
                        <div class="other">其他方式登录</div>
                        <div class="others">
                            <a href=""><img src="../images/qq.gif" alt=""></a>
                            <a href=""><img src="../images/wei.gif" alt=""></a>
                            <a href=""><img src="../images/qq.gif" alt=""></a>
                            <a href=""><img src="../images/xinglang.gif" alt=""></a>
                        </div>
                    </div>
                    <div class="two">
                        <div class="two1">
                            <input type="text" name="" id="phone" placeholder="请输入手机号">
                            <div>
                                请输入正确的手机号
                            </div>
                        </div>
                        <div class="two2">
                            <input type="text" name="" id="email" placeholder="请输入邮箱">
                            <div>
                                请输入正确的邮箱
                            </div>
                        </div>
                        <div class="two3">
                            <input type="password" name="" id="password" placeholder="密码">
                            <div>
                                密码长度为6~12由数字,大小写字母组成
                            </div>
                        </div>
                        <input type="submit" value="注册" class="submit submit_regist">
                        <div class="wangji"><a href="">收不到验证码？</a> </div>
                        <div style="line-height: 10px;"> <input type="checkbox" name="" id="" style="width: 15px;height: 15px;">已阅读并同意小米账号 <a href="">用户协议</a>和<a href="">隐私政策</a> </div>
                        <div class="other">其他方式登录</div>
                        <div class="others">
                            <a href=""><img src="../images/qq.gif" alt=""></a>
                            <a href=""><img src="../images/wei.gif" alt=""></a>
                            <a href=""><img src="../images/qq.gif" alt=""></a>
                            <a href=""><img src="../images/xinglang.gif" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



</body>
<script>
    $(".regist").click(function() {
        $(".box").css({
            left: -400
        })
        $(this).css({
            borderBottom: "4px solid #ff5c00"
        }).siblings().css({
            borderBottom: "none"
        })
    })
    $(".login").click(function() {
        $(".box").css({
            left: 0
        })
        $(this).css({
            borderBottom: "4px solid #ff5c00"
        }).siblings().css({
            borderBottom: "none"
        })
    })
    $("input").focus(function() {
        $(this).css({
            border: "2px solid #ff5c00",
        }).next(".mark").css({
            top: 15,
            left: 35,
            fontSize: 14
        })
    })
    $("input").blur(function() {
        if (!$(this).val()) {
            $(this).css({
                border: "none"
            }).next(".mark").css({
                top: 32,
                left: 35,
                fontSize: 20
            })
        } else {
            $(this).css({
                border: "2px solid #ff5c00",
            }).next(".mark").css({
                top: 15,
                left: 35,
                fontSize: 14
            })
        }
        if (!$(this).val()) {
            $(this).nextAll(".tishi").css({
                display: "none"
            })
        }
    })


    var phone_isright;
    var email_isright;
    var password_isright;

    $("#phone").blur(function() {
        var reg = /^1(3|5|6|7|8|9)[0-9]{9}$/;
        if (reg.test($(this).val())) {
            $(this).next().css({
                display: "none"
            })
            $.post("../php/isExistUser.php", {
                    phone: $("#phone").val(),
                },
                function(data) {
                    var result = JSON.parse(data)
                    console.log(result);
                    var {
                        status,
                        msg
                    } = result;
                    $("#phone").next().css({
                        display: 'block',
                        color: "green"
                    }).text(msg)
                    if (status) {
                        phone_isright = true;
                        console.log(phone_isright);
                    }
                });
        } else {
            $(this).next().css({
                display: "block",
                color: "red"
            }).text(" 请输入正确的手机号")
            phone_isright = false;

        }
    })

    $("#email").blur(function() {
        var reg = /^[1-9][0-9]{6,12}@(qq|yahoo|sina|baidu|google)(\.com|\.cn|\.net)$/;
        if (reg.test($(this).val())) {
            $(this).next().css({
                display: "none"
            })


            $.post("../php/isExistEmail.php", {
                    email: $("#email").val(),
                },
                function(data) {
                    var result = JSON.parse(data)
                    console.log(result);
                    var {
                        status,
                        msg
                    } = result;
                    $("#email").next().css({
                        display: 'block',
                        color: "green"
                    }).text(msg)
                    if (status) {
                        email_isright = true;
                        console.log(email_isright);
                    }
                });
        } else {
            $(this).next().css({
                display: "block",
                color: "red"
            }).text(" 请输入正确的邮箱")
            email_isright = false;

        }
    })

    $("#password").blur(function() {
        if ($(this).val().length >= 6 && $(this).val().length <= 12) {
            var reg = /^[0-9a-zA-Z]{6,12}$/;
            if (reg.test($(this).val())) {
                var reg1 = /[0-9]/;
                var reg2 = /[a-z]/;
                var reg3 = /[A-Z]/;
                var qq = false;
                var ww = false;
                var ee = false;
                // for (var i = 0; i < $(this).val().length; i++) {
                if (reg1.test($(this).val())) {
                    qq = true;
                }
                if (reg2.test($(this).val())) {
                    ww = true;
                }
                if (reg3.test($(this).val())) {
                    ee = true;
                }
                // }
                var sum = 0;
                sum = qq + ww + ee;
                if (sum == 1) {
                    $(this).next().text("密码强度弱").css({
                        display: "block",
                        color: "orange"
                    })
                    password_isright = true;
                }
                if (sum == 2) {
                    $(this).next().text("密码强度中").css({
                        display: "block",
                        color: "yellow"
                    })
                    password_isright = true;
                }
                if (sum == 3) {
                    $(this).next().text("密码强度强").css({
                        display: "block",
                        color: "green"
                    })
                    password_isright = true;
                }
            }
        } else {
            $(this).next().text(" 密码长度为6~12由数字,大小写字母组成").css({
                display: "block",

            })
            password_isright = false;
        }
    })



    $(".submit_regist").click(function() {
        if (password_isright && email_isright && email_isright) {
            alert("注册成功！请登录");
            $.post("../php/regist.php", {
                    phone: $("#phone").val(),
                    email: $("#email").val(),
                    password: $("#password").val()
                },
                function(data) {

                });
        }
    })



    $(".submit_login").click(function() {
        if ($("#user").val()) {
            var reg = /\@/;
            if (reg.test($("#user").val())) {
                $.post("../php/login.php", {
                        email: $("#user").val(),
                        password: $("#pwd").val()
                    },
                    function(data) {
                        var {
                            status,
                            phone,
                            msg
                        } = JSON.parse(data);
                        if (status) {
                            setCookie("id", phone);
                            location.href = "../html/index.html";
                        } else {
                            $(".submit_login").prev(".one2").children(".tishi").css({
                                display: "block"
                            }).text(msg);
                        }
                    });
            } else {
                // alert("手机号登录")
                $.post("../php/login.php", {
                        phone: $("#user").val(),
                        password: $("#pwd").val()
                    },
                    function(data) {
                        var {
                            status,
                            msg
                        } = JSON.parse(data);
                        if (status) {
                            setCookie("id", $("#user").val())
                            var str = location.href;
                            var arr = str.split("?")[1];
                            var arr2 = str.split("?")[2];
                            if (arr) {
                                location.href = arr + "?" + arr2;
                            } else {
                                location.href = "../html/index.html";
                            }
                        } else {
                            $(".submit_login").prev(".one2").children(".tishi").css({
                                display: "block"
                            }).text(msg);
                        }
                    });
            }
        } else {
            $(".submit_login").prev(".one2").children(".tishi").css({
                display: "block"
            }).text("请输入账号");
        }
    })
</script>

</html>